<?php echo $this->render('/public/header'); ?>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.0.9/index.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.0.9/theme-chalk/index.css" rel="stylesheet">
    <style>
        .label {
            display: block;
            font-size: 14px;
        }

        p {
            font-size: 14px;
            font-family: KaiTi
        }
    </style>
    <div id="main" class="col-xs-12" style="width:2500px">
                <el-date-picker
                v-model="year"
                align="right"
                type="year"
                value-format="yyyy"
                @change="handlerChange"
                placeholder="选择年">
        </el-date-picker>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default" onclick="show(1)">显示表格</button>
            <button type="button" class="btn btn-default" onclick="show(2)">显示折线图</button>
        </div>
        <div id="table">
            <?php if ($this->params['list']) {
                $i = $this->params['year']==date('Y')?date('m'):12;
                $monthdata = [];
                for (;$i >= 1; $i--) {
                    $monthdata[] = $this->params['year'] . "-" . str_pad($i, 2, "0", STR_PAD_LEFT);
                }
                ?>
                <?php foreach ($this->params['list'] as $k => $v) { ?>
                    <span style="width:150px;font-size:14px;float:left;margin-top:20px"><?php echo $v['name']; ?></span>
                    <div class="showit">
                        <div style="width:100px;display: inline-block;margin:10px 0px">
                            <div class="show">
                                <div style="display: none">
                                    <p class="label label-primary">样品:</p>
                                    <p class="label label-primary">paypal:</p>
                                    <p class="label label-primary">T/T:</p>
                                    <p class="label label-primary">西联:</p>
                                </div>
                                <p class="label label-warning">统计:</p>
                            </div>
                        </div>
                        <?php foreach ($monthdata as $v2): ?>
                            <div style="width:100px;display: inline-block;margin:10px 0px"
                                 onclick="turnto(<?php echo $v['service_name']; ?>,'<?php echo $v2; ?>')">
                                <p><?php echo $v2; ?></p>
                                <div class="show">
                                    <div style="display: none">
                                        <?php $yp = isset($v['list'][$v2][4]) ? $v['list'][$v2][4]['money'] : 0; ?><p
                                                class="label label-primary"
                                                style="<?php echo $yp < 0 ? 'color:red' : ''; ?>"><?php echo $yp; ?></p>
                                        <?php $pp = isset($v['list'][$v2][1]) ? $v['list'][$v2][1]['money'] : 0; ?><p
                                                class="label label-primary"
                                                style="<?php echo $pp < 0 ? 'color:red' : ''; ?>"><?php echo $pp; ?></p>
                                        <?php $tt = isset($v['list'][$v2][2]) ? $v['list'][$v2][2]['money'] : 0; ?><p
                                                class="label label-primary"
                                                style="<?php echo $tt < 0 ? 'color:red' : ''; ?>"><?php echo $tt; ?></p>
                                        <?php $xlian = isset($v['list'][$v2][3]) ? $v['list'][$v2][3]['money'] : 0; ?><p
                                                class="label label-primary"
                                                style="<?php echo $xlian < 0 ? 'color:red' : ''; ?>"><?php echo $xlian; ?></p>
                                    </div>
                                    <p class="label label-warning"><?php echo($yp + $pp + $tt + $xlian); ?></p>

                                </div>
                            </div>
                            <?php endforeach; ?>
                        <div style="width:100px;margin:10px 0px;display: inline-block;"
                             onclick="turnto(<?php echo $v['service_name']; ?>,12)">
                            <p>统计</p>
                            <div class="show">
                                <div style="display: none">
                                    <p class="label label-primary">
                                        <?php echo $v['list']['total'][4]; ?></p>
                                    <p class="label label-primary">
                                        <?php echo $v['list']['total'][1]; ?></p>
                                    <p class="label label-primary">
                                        <?php echo $v['list']['total'][2]; ?></p>
                                    <p class="label label-primary">
                                        <?php echo $v['list']['total'][3]; ?></p>
                                </div>
                                <p class="label label-warning">
                                    <?php echo($v['list']['total'][4] + $v['list']['total'][1] + $v['list']['total'][2] + $v['list']['total'][3]); ?></p>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            <?php } ?>
            <div style="width:100px;display: inline-block;margin:10px 0px 10px 150px;">
                <p class="label label-danger">统计</p>
            </div>
            <?php $total = 0;
            if($this->params['list']):?>
            <?php foreach ($monthdata as $v):?>
                <?php if(isset($this->params['total'][$v])):?>
                <div style="width:100px;display: inline-block;margin:10px 0px">
                    <p class="label label-danger">
                        <?php $tmp = $this->params['total'][$v];
                        $total += $tmp;
                        echo $tmp; ?></p>
                </div>
            <?php endif;?>
            <?php endforeach; ?>
            <div style="width:120px;display: inline-block;margin:10px 0px">
                <p class="label label-danger"><?php echo $total; ?></p>
            </div>
            <?php endif;?>
        </div>
        <div id="picture" style="width:1200px;height:1000px;display:none;"></div>
    </div>
    <script>
        new Vue({
            el:"#main",
            data:{
                year:"<?php echo $this->params['year'];?>"
            },
            methods:{
                handlerChange:function(v){
                    window.location.href="/table/sellperformance?year="+v;
                }
            }
        })
        var myChart = echarts.init(document.getElementById('picture'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [<?php foreach ($this->params['list'] as $v) {
                    echo "'" . $v['name'] . "',";
                };?>]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [<?php for ($i = 1; $i <= 12; $i++) {
                    echo "'" . $i . "月',";
                }?>]
            },
            yAxis: {
                type: 'value'
            },
            series: <?php echo json_encode($this->params['picture']);?>

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
    <script>
        function show(type) {
            if (type == 1) {
                $("#table").show();
                $("#picture").hide();
            }
            else {
                $("#table").hide();
                $("#picture").show();
            }

        }

        function turnto(id, month) {
            window.location.href = "/table/income?service_name=" + id
            + '&begin_time='
            + month
            +'-01&end_time='
            + month+'-31';
        }

        $(function () {
            $(".showit").hover(function () {
                $(this).find('.show').children('div').show();
            }, function () {
                $(this).find('.show').children('div').hide();
            })
        })
    </script>
<?php echo $this->render('/public/footer'); ?>